<template>
  <a-modal :footer="null" title="修改用户" v-model:visible="editVisible">
    <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="姓名" v-bind="validateInfos.name">
        <a-input v-model:value="modelRef.name" placeholder="请输入姓名"/>
      </a-form-item>
      <a-form-item label="密码" v-bind="validateInfos.password">
        <a-input type="password" v-model:value="modelRef.password" placeholder="请输入密码"/>
      </a-form-item>
      <a-form-item label="年龄" v-bind="validateInfos.age">
        <a-input v-model:value="modelRef.age" placeholder="请输入年龄"/>
      </a-form-item>
      <a-form-item label="性别" v-bind="validateInfos.gender">
        <a-select v-model:value="modelRef.gender">
          <a-select-option :value="1">男</a-select-option>
          <a-select-option :value="2">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="薪资" v-bind="validateInfos.salary">
        <a-input v-model:value="modelRef.salary" placeholder="请输入薪资"/>
      </a-form-item>
      <a-form-item label="入职时间" v-bind="validateInfos.create_time">
        <a-date-picker
            :disabledDate="disabledDate"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            show-time
            v-model:value="modelRef.create_time"
            placeholder="请选择入职时间"
        />
      </a-form-item>
      <a-form-item label="部门名称" v-bind="validateInfos.depart_id">
        <a-select v-model:value="modelRef.depart_id" placeholder="请选择部门">
          <template v-for="item in departList" :key="item.id">
            <a-select-option :value="item.id">{{ item.title }}</a-select-option>
          </template>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-space :size="20">
          <a-button type="normal" @click="resetModalData()">关闭</a-button>
          <a-button type="primary" @click="onsubmit">修改</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {ref, watchEffect} from "vue";
import {useForm} from "ant-design-vue/es/form";

import {modelRef, rulesRef, useDepartList} from './config'
import useUserStore from "@/store/userModule";
import dayjs, {Dayjs} from "dayjs";
import {ISubmit} from "@/views/User/Main/EditForm/types";

const editVisible = ref(false)
const userStore = useUserStore()
// 获取部门列表来渲染下拉框
const departList = ref([{}])
// 时间格式化
const disabledDate = (current: Dayjs) => {
  /* 限制可选时间（当前时间往后推30天） */
  return current && current > dayjs().add(30, 'day').endOf("day");
}
// useForm
const {resetFields, validate, validateInfos} = useForm(modelRef, rulesRef, {});

// 提交
const onsubmit = () => {
  validate()
      .then(async formData => {
        const submitData: ISubmit = Object.assign(formData, {id: modelRef.id})
        const flag = await userStore.updateUserAction(submitData)
        if (flag) {
          await handleEditModal(false)
          resetFields()
        }
      })
      .catch(err => {
        console.log(err)
      })
}

const handleEditModal = async (flag: boolean) => {
  flag && (departList.value = await useDepartList())
  editVisible.value = flag
}

const resetModalData = () => {
  resetFields()
  handleEditModal(false)
}

watchEffect(() => {
  const currentUserDetail = userStore.currentUserDetail
  modelRef.id = currentUserDetail.id
  modelRef.name = currentUserDetail.name
  modelRef.password = currentUserDetail.password
  modelRef.age = currentUserDetail.age
  modelRef.gender = currentUserDetail.gender
  modelRef.salary = currentUserDetail.salary
  modelRef.create_time = currentUserDetail.create_time
  modelRef.depart_id = currentUserDetail.depart_id
})
defineExpose({
  handleEditModal
})
</script>

<style lang="less" scoped></style>
